@offset: 126;
@duration: 1.4s;

.spinner {
  position: fixed;
  top: 40%;
  left: 50%;
  opacity: 0;
  transition: opacity 0.15s ease;
  animation: rotator @duration linear infinite;
  animation-play-state: paused;
  z-index: 999;
  transform: translateX(-50%);
  transform-origin: center;
}

.show {
  opacity: 1;
  animation-play-state: running;
}

.path {
  stroke: #ff6600;
  stroke-dasharray: @offset;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation: dash 1.4s ease-in-out infinite;
}

@keyframes rotator {
  0% {
    transform: scale(0.5) rotate(0deg);
  }
  100% {
    transform: scale(0.5) rotate(270deg);
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: @offset;
  }
  50% {
    stroke-dashoffset: (@offset / 2);
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: @offset;
    transform: rotate(450deg);
  }
}
